<template>
  <div class="role-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="操作时间" prop="date">
          <el-date-picker v-model="queryForm.date" @change="dateChange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOplogList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table :data="oplogList" empty-text="无数据">
        <el-table-column type="index" label="ID"/>
        <el-table-column label="访问账号" prop="op_username" width="130"/>
        <el-table-column label="访问时间" prop="op_time" width="180"/>
        <el-table-column label="路径" prop="op_uri"  width="300"/>
        <el-table-column label="参数" prop="op_param" />
      </el-table>
      <div style="margin-top:10px;"></div>
      <el-pagination
          v-model:current-page="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[15, 30, 60]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :total="queryForm.total"
          :page-size="queryForm.pageSize"
          @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>
export default {
  name: "oplog",
  data(){
    return {
      queryForm:{
        pageNum:1,
        pageSize:15,
        total:0,
        mod_name: "",
        date: this.$util.formateDate(new Date(),'yyyy-MM-dd')
      },
      oplogList: [],
      modList:[],
    }
  },
  mounted() {
    this.getOplogList()
  },
  methods:{
    dateChange(v){
      this.queryForm.begin_date = v;
      this.queryForm.end_date = v;
      this.getOplogList()
    },
    // 角色列表初始化
    async getOplogList(){
      try {
        let {data} = await this.$api.oplogList(this.queryForm)
        this.oplogList = data.list
        this.queryForm.total = data.total
      } catch (e) {
        throw new Error(e)
      }
    },
    handleCurrentChange(page) {
      this.queryForm.pageNum = page;
      this.getOplogList()
    },
    handleSizeChange(pageSize){
      this.queryForm.pageSize = pageSize;
      this.getOplogList()
    }
  }
}
</script>

<style lang="scss">

</style>
